<template>
    <div>
      <div class="work-title">
        <div class="title">
          <table>
            <tr>
              <td><span>面试信息</span></td>
            </tr>
          </table>
          <table>
            <tr>
              <td><span>
                面试情况：
                <span v-if="data.status == 0" style="margin-right: 10px">
                  <el-button
                    type="success"
                    @click="operate('success')"
                  >审核通过</el-button>
                  <el-button type="danger" @click="operate('fail')">审核失败</el-button>
                </span>
                <el-tag v-if="data?.status == 0" type="warning">待审核</el-tag>
                <el-tag v-if="data?.status == 1" type="success">审核成功</el-tag>
                <el-tag v-if="data?.status == 2" type="danger">审核失败</el-tag>
              </span></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="company-archives-container">
        <table class="company-archives">
                <tbody>
                    <tr>
                        <td class="label">姓名</td>
                        <td class="value">
                            <span>{{ data.name }}</span>
                        </td>
  
                        <td class="label">手机号</td>
                        <td class="value" colspan="2">
                          <span>{{ data.phone }}</span>
                        </td>
  
                        <td class="value" style="padding: 8px;text-align: center;" rowspan="4">
                            <el-image :src="data.one_inch_photo || ''" style="width: 162px;height: 195px;">
                                <div slot="error" class="image-error-slot">
                                    <i class="el-icon-picture-outline icon" />
                                </div>
                            </el-image>
                        </td>
                    </tr>
  
                    <tr>
                      <td class="label">出生年月</td>
                      <td class="value">
                          <span>{{ data.birth }}</span>
                      </td>
                        <td class="label">性别</td>
                        <td class="value" colspan="2">
                          <span v-if="data.gender == 1">男</span>
          <span v-if="data.gender == 0">女</span>
  
                        </td>
                    </tr>
  
                    <tr>
  
                        <td class="label">民族</td>
                        <td class="value">
                            
                          <span>{{ data.nations?.nation }}</span>
                        </td>
                        <td class="label">身份证</td>
                        <td class="value" colspan="2">
                            <span>{{ data.identity_card }}</span>
                            &nbsp;
                            <el-button 
                                type="text" 
                                @click="showPhoto"
                            >
                                <i class="el-icon-view" />
                                查看
                            </el-button>
                        </td>
                    </tr>
  
                    <tr>
                        <td class="label">年龄</td>
                        <td class="value">
                            <span>{{ data.age }}</span>
                        </td>
  
                        <td class="label">学历</td>
                        <td class="value" colspan="2">
                          <span>{{ data.educations?.name }}</span>
                        </td>
                    </tr>
  
                    <tr>
                        <td class="label">员工身份</td>
                        <td class="value">
                            <span>{{
                              data.identity == 1
                                ? "实习员工"
                                : data.identity == 0
                                  ? "正式员工"
                                  : "试用员工"
                            }}</span>
                        </td>
  
                        <td class="label">婚姻状况</td>
                        <td class="value">
                            <span>{{ data.marital?.name }}</span>
                        </td>
  
                        <td class="label">户籍地</td>
                        <td class="value">
                            <span>{{ data.domicile }}</span>
                        </td>
                    </tr>
                    <tr>
                      <td class="label">现住址</td>
                      <td class="value">
                          <span>{{ data.current_address }}</span>
                      </td>
  
                      <td class="label">应聘部门</td>
                      <td class="value">
                          <span>{{ data.department?.name }}</span>
                      </td>
  
                      <td class="label">应聘职位</td>
                      <td class="value">
                          <span>{{ data.position?.name }}</span>
                      </td>
                  </tr>
                  <tr>
                    <td class="label">期望薪资</td>
                    <td class="value">
                        <span>{{ data.salary_requirements }}</span>
                    </td>
  
                    <td class="label">员工薪资</td>
                    <td class="value">
                        <span>{{ data.practice_salary }}</span>
                    </td>
  
                    <td class="label">提交时间</td>
                    <td class="value">
                        <span>{{ data.created_at }}</span>
                    </td>
                </tr>
                <tr>
                  <td class="label">特长</td>
                  <td class="value">
                      <span>{{ data.skills }}</span>
                  </td>
  
                  <td class="label">介绍人</td>
                  <td class="value">
                      <span>        {{ data.introducer?.username }}
                        {{ data.introducer?.user_company?.department?.name }}</span>
                  </td>
              </tr>
                </tbody>
        </table>
      </div>
      <div>
        <div class="work-title">
          <table style="width: 100%">
            <tr>
              <td><span>工作经历</span></td>
            </tr>
          </table>
        </div>
        <el-table :data="work" style="width: 100%">
          <el-table-column prop="companyName" label="公司" />
          <el-table-column prop="beginDate" label="开始时间" />
          <el-table-column prop="endDate" label="结束时间" />
          <el-table-column prop="department" label="部门" />
          <el-table-column prop="position" label="职位" />
          <el-table-column prop="reason_leaving" label="离职原因" />
          <el-table-column prop="company_telephone" label="公司电话" />
          <el-table-column prop="salary" label="薪资" />
          <el-table-column prop="jobDescription" label="工作内容" />
        </el-table>
      </div>
      <div>
        <div class="work-title">
          <table style="width: 100%">
            <tr>
              <td><span>教育经历</span></td>
            </tr>
          </table>
        </div>
        <el-table :data="education" style="width: 100%">
          <el-table-column prop="schoolName" label="学校" />
          <el-table-column prop="beginDate" label="开始时间" />
          <el-table-column prop="endDate" label="结束时间" />
          <el-table-column prop="major" label="专业" />
          <el-table-column label="学历">
            <template slot-scope="scope">
              <span>{{ getDegree(scope.row, "learning_nature", "暂无") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="certificate" label="证书" />
          <el-table-column prop="certificate_number" label="证书编号" />
        </el-table>
      </div>
      <div>
        <div class="work-title">
          <table style="width: 100%">
            <tr>
              <td><span>技能证书</span></td>
            </tr>
          </table>
        </div>
        <el-table :data="certificateList" style="width: 100%" border>
          <el-table-column prop="name" label="证书名称" />
          <el-table-column prop="expire_at" label="到期时间" />
          <el-table-column label="附件">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.attachment"
                type="text"
                @click="download(scope.row.attachment.path)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 薪资信息填写 -->
      <el-dialog
        title="确认信息"
        :visible.sync="confirmDialogVisible"
        :close-on-click-modal="false"
        width="30%"
      >
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="员工身份" prop="identity">
            <el-radio-group v-model="form.identity" @change="selectIdentity">
              <el-radio :label="0">正式员工</el-radio>
              <el-radio :label="1">实习员工</el-radio>
              <el-radio :label="2">试用员工</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.identity"
            :label="form.identity == 1 ? '实习薪资:' : '试用薪资:'"
            prop="salary"
          >
            <el-input-number v-model="form.salary" :min="0" />
          </el-form-item>
          <el-form-item
            v-if="form.identity && form.identity == 1"
            label="实习时间"
            prop="practice"
            :rules="[
              {
                required: true,
                message: '请输入实习时间',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-date-picker
              v-model="form.practice"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item
            v-if="form.identity && form.identity != 1"
            label="试用时间"
            prop="practice"
            :rules="[
              {
                required: true,
                message: '请输入试用时间',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-date-picker
              v-model="form.practice"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item
            v-if="!form.identity"
            label="劳动合同"
            prop="practice"
            :rules="[
              {
                required: true,
                message: '请输入劳动合同时间',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-date-picker
              v-model="form.practice"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="劳动合同开始日期"
              end-placeholder="劳动合同结束日期"
            />
          </el-form-item>
          <el-form-item v-if="!form.identity" label="员工薪资" prop="salary">
            <el-input-number v-model="form.salary" :min="0" />
          </el-form-item>
          <el-form-item label="入职时间" prop="time_zone">
            <el-date-picker
              v-model="form.time_zone"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item v-if="form.identity" label="转正薪资">
            <el-input v-model="form.salary_more" class="width45" />
            <span>至</span>
            <el-input v-model="form.salary_less" class="width45" />
          </el-form-item>
          <el-form-item label="部门">
            {{ form.dept?.name }}
            <CheckDept
              v-if="confirmDialogVisible"
              :id="form.dept.id"
              @check="check"
            />
          </el-form-item>
          <el-form-item label="岗位">
            <el-select v-model="form.position_id" placeholder="请选择">
              <el-option
                v-for="item in position"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            :loading="loading"
            @click="confirm()"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 一寸照预览end -->
      <!-- 身份证预览 -->
      <el-dialog
        v-if="data"
        title="身份证"
        :visible.sync="photoDialogVisible"
        :close-on-click-modal="false"
        width="40%"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane label="身份证正面" name="first">
            <el-image
              :src="data.identity_card_front"
              :preview-src-list="[data.identity_card_front]"
            />
          </el-tab-pane>
          <el-tab-pane label="身份证反面" name="second">
            <el-image
              :src="data.identity_card_reverse"
              :preview-src-list="[data.identity_card_reverse]"
            />
          </el-tab-pane>
          <el-tab-pane label="一寸照" name="three">
            <el-image
              :src="data.one_inch_photo"
              :preview-src-list="[data.one_inch_photo]"
            />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="photoDialogVisible = false"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 身份证预览end -->
      <el-dialog title="拒绝理由" :visible.sync="show_faile" 
      width="500px" :close-on-click-modal="false">
        <el-input v-model="fail_reason" placeholder="请输入拒绝理由" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="show_faile = false">取 消</el-button>
          <el-button type="primary" @click="refuseEvent">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Block from '../../views/personnel-files/components/Block'
  import dayjs from 'dayjs'
  import { getPosition, getDept } from '@/api/basic'
  import { examineInterview } from '@/api/entry'
  import CheckDept from '@/components/Check/Dept'
  import { atLeastN } from '@/utils/kris_utils'
  export default {
    name: 'EntryInfo',
    components: { CheckDept,Block },
    props: {
      data: {
        required: true
      }
    },
    data() {
      return {
        rules: {
          identity: [
            {
              required: true,
              message: '请选择员工身份',
              trigger: ['blur', 'change']
            }
          ],
          salary: [
            {
              required: true,
              message: '请输入薪资',
              trigger: ['blur', 'change']
            },
            {
              validator: (rule, value, callback) => {
                let salary = 0
                switch (typeof this.form.salary) {
                  case 'string':
                    salary = parseFloat(this.form.salary)
                    if (isNaN(salary)) callback(new Error('请输入薪资'))
                    break
  
                  case 'number':
                    salary = this.form.salary
                    break
  
                  default:
                    callback(new Error('请输入薪资'))
                }
  
                if (salary < 0) callback(new Error('薪资不能为负值'))
  
                callback()
              },
              trigger: ['blur']
            }
          ],
          time_zone: [
            {
              required: true,
              message: '请选择入职时间',
              trigger: ['blur', 'change']
            }
          ]
        },
        fail_reason: '',
        show_faile: false,
        work: [],
        education: [],
        photoDialogVisible: false,
        activeName: 'first',
        form: {
          position_id: null,
          practice: [],
          identity: 1,
          entryDateRange: []
        },
        confirmDialogVisible: false,
        position: [],
        dept: [],
        loading: false,
        certificateList: []
      }
    },
    computed: {
      errorLogs() {
        return this.$store.getters.errorLogs
      }
    },
    watch: {
      data(old, val) {
        if (this.$isJSON(this.data.work_experience)) {
          this.work = JSON.parse(this.data.work_experience)
        }
        if (this.$isJSON(this.data.education_experience)) {
          this.education = JSON.parse(this.data.education_experience)
        }
        if (this.$isJSON(this.data.certificate_list)) {
          this.certificateList = JSON.parse(this.data.certificate_list)
        }
      }
    },
    methods: {
      getDegree(row, label, name) {
        return row.schoolType.label
      },
      selectIdentity(value) {
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      refuseEvent() {
        if (!this.fail_reason) return this.$message.error('请输入拒绝理由')
        examineInterview({
          id: this.data.id,
          examine: 2,
          fail_reason: this.fail_reason
        }).then((res) => {
          this.$notify({
            title: '成功',
            message: '拒绝成功',
            type: 'success'
          })
          this.$emit('change')
          this.show_faile = false
        })
      },
      showPhoto() {
        this.activeName = 'first'
        this.photoDialogVisible = true
      },
      showIdCardPicture(type) {
        this.activeName = type
        this.photoDialogVisible = true
      },
      async getPositions() {
        const res = await getPosition()
        this.position = res.data
      },
      async getDepts() {
        const res = await getDept()
        this.dept = res.data
      },
      operate(type) {
        switch (type) {
          case 'success':
            this.getPositions()
            this.getDepts()
            //   this.form.dept_id = this.data.department.id;
            this.form.dept = this.data.department
            this.form.position_id = this.data.position.id
            this.confirmDialogVisible = true
            break
          case 'fail':
            this.$prompt(`是否拒绝${this.data.name}的面试申请`, '拒绝面试申请', {
              inputValidator(value) {
                if (typeof value === 'string' && value.trim() !== '') return true
                return '请输入拒绝理由'
              },
              inputPlaceholder: '请输入拒绝理由',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(({ value }) => {
                examineInterview({
                  id: this.data.id,
                  examine: 2,
                  fail_reason: value
                }).then((res) => {
                  this.$notify({
                    title: '成功',
                    message: '拒绝成功',
                    type: 'success'
                  })
                  this.$emit('change')
                })
              })
              .catch(() => {})
            break
        }
      },
      check(data) {
        // this.form.dept = data.data
        this.$set(this.form, 'dept', data.data)
        this.$forceUpdate()
      },
      download(url, name) {
        if (url) {
          window.location.href = url
        } else {
          this.$message({
            message: name ? '未上传' + name : '未上传',
            type: 'error'
          })
        }
      },
      entryDateRangeFormatter(entryDateRange) {
        if (!Array.isArray(entryDateRange)) return undefined
  
        if (entryDateRange.length !== 2) return undefined
  
        const data = {
          startDate: dayjs(entryDateRange[0]).format('YYYY-MM-DD'),
          endDate: dayjs(entryDateRange[1]).format('YYYY-MM-DD')
        }
  
        return JSON.stringify(data)
      },
      validate() {
        if (this.form.identity !== 0) {
          return (
            this.form.salary &&
            this.form.practice &&
            this.form.practice.length >= 1 &&
            this.form.dept.id &&
            this.form.position_id
          )
        }
  
        return (
          this.form.salary &&
          this.form.dept &&
          typeof this.form.position_id === 'number' &&
          atLeastN(this.form.entryDateRange, 2)
        )
      },
      confirm() {
        this.$refs['form'].validate((is) => {
          if (is) {
            if (this.form.salary_more && this.form.salary_less) {
              this.form.regular_salary =
                this.form.salary_more + '-' + this.form.salary_less
            }
            examineInterview({
              id: this.data.id,
              examine: 1,
              salary: this.form.salary,
              regular_salary: this.form.regular_salary,
              practice_start_at: this.form.practice[0],
              practice_end_at: this.form.practice[1],
              department_id: this.form?.dept?.id,
              position_id: this.form.position_id,
              time_zone: this.entryDateRangeFormatter(this.form.time_zone)
            }).then((res) => {
              this.loading = false
              this.confirmDialogVisible = false
              this.$notify({
                title: '成功',
                message: '审核成功，请提示员工扫码进行入职填写',
                type: 'success'
              })
              this.$emit('change')
            })
          } else {
            return this.$notify.error({
              title: '错误',
              message: '请填写完整信息'
            })
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .work-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
  }
  .title{
    display: flex;
    justify-content: space-between;
  }
  .width45 {
    width: 45%;
  }
  .company-archives-container {
    .company-archives {
        width: 100%;
        border: 1px solid #DCDFE6;
        border-collapse: collapse;
  
        .label,
        .value {
            width: 200px;
            text-align: left;
            color: #333333;
            padding: 4px 30px;
            margin: 0;
            border-bottom: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
            font-size: 15px;
            height: 44px;
        }
  
        .label:first-child,.value:first-child {
            border-left: none;
        }
  
        tr:last-child {
            .label,.value {
                border-bottom: none;
            }
        }
  
        .label {
            // width: 160px;
            // height: 44px;
            background-color: #F5F7FA;
        }
  
        .image-error-slot {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f7fa;
            
            >.icon {
                font-size: 30px;
                color: #909399;
            }
        }
    }
  }
  </style>
  